<!--  -->
<template>
  <div class='app-container'>
    <el-row>
      <el-col :xs="24" :sm="20">
        <el-form ref="form" :model="form" :rules="formRules" label-width="80px" size="small">
          <el-form-item v-if="submitType === 1">
            <el-select v-model="value" class="a_select" filterable remote reserve-keyword placeholder="输入客户姓名或者电话查询签约"
              :remote-method="remoteMethod" @change="onChange" :loading="loading">
              <el-option v-for="(item, index) in options" :key="item.id"
                :label="`${item.contractCode}-${item.customerName}-${item.customerMobile}`" :value="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合约编号">
            <el-input readonly v-model="contractCode"></el-input>
          </el-form-item>
          <el-form-item label="客户姓名">
            <el-input readonly v-model="customerName"></el-input>
          </el-form-item>
          <el-form-item label="客户电话">
            <el-input readonly v-model="customerMobile"></el-input>
          </el-form-item>

        <!-- <el-form-item label="费率">
            <el-input readonly v-model="costRate"></el-input>
                </el-form-item> -->
        <!-- <el-form-item label="进件需求">
            <el-input v-model="form.need"></el-input>
                </el-form-item> -->
          <el-form-item label="产品">
            <el-select v-model="productId" @change="productChange" clearable placeholder="产品">
              <el-option v-for="(item) in productOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        <!-- <el-form-item label="进件数量">
            <el-input v-model="form.counts"></el-input>
                </el-form-item> -->
          <el-form-item label="进度">
            <el-select v-model="form.progress" clearable placeholder="进度">
              <el-option v-for="item in progressOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        <!-- <el-form-item label="完成额度">
            <el-input v-model="form.completion"></el-input>
                </el-form-item> -->
          <el-form-item label="在审金额" prop="need">
            <el-input v-model="form.need"></el-input>
          </el-form-item>
          <el-form-item label="佣金" prop="income">
            <el-input v-model="form.income"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" clearable placeholder="状态">
              <el-option label="正常" :value="1" />
              <el-option label="作废" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="付款截图">
            <el-upload :action="UPLOADFILEPATH" list-type="picture-card" :file-list="fileList" :on-success="onSuccess"
              :on-preview="previewImage" :on-remove="onRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="upload_tips">备注：选填，付款截图要求：需要把付款账号，收款账户，付款日期，付款金额等包含在内</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="close()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  myContractAll,
  productAll,
  addImport,
  updateImport,
  UPLOADFILEPATH,
} from "@/api/customer";
import { progressOptions } from "./config";
import { IS_DECIMAL } from '@/common/validator'
export default {
  name: "IntoForm",
  props: {
    submitType: {
      type: Number,
      default: 1,
    },
    mobile: {
      type: [String, Number],
      default: "",
    },
  },
  components: {},
  data() {
    return {
      form: {
        productId: "",
        need: "",
        counts: "",
        progress: "",
        completion: "",
        income: "",
        state: 1,
      },
      productId: "",
      contractCode: "",
      customerName: "",
      customerMobile: "",
      costRate: "",
      deposit: "",
      value: "",
      progressOptions,
      options: [],
      productOptions: [],
      loading: false,
      UPLOADFILEPATH: UPLOADFILEPATH,
      fileList: [],
      formRules: {
        need: [{ required: true, message: '请输入在审金额', trigger: 'blur' }, { validator: IS_DECIMAL, message: "在审金额必须为数字且最多两位小数", trigger: 'blur' }],
        income: [{ required: true, message: '请输入佣金', trigger: 'blur' }, { validator: IS_DECIMAL, message: "佣金必须为数字且最多两位小数", trigger: 'blur' },]
      }
    };
  },
  computed: {},
  watch: {
    mobile: {
      handler: function (n, o) {
        if (n) {
          let _this = this;
          _this.remoteMethod(n, function () {
            _this.onChange(0)
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    async remoteMethod(query, callBack) {
      this.loading = true;
      try {
        const params = {
          customerMobile: query,
          customerName: query,
        };
        await myContractAll(params).then((res) => {
          this.options = res.data;
          if (callBack) {
            callBack()
          }
        });
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    onChange(e) {
      const selectItem = this.options[e];
      console.log(selectItem);
      this.contractCode = selectItem.contractCode;
      this.customerName = selectItem.customerName;
      this.customerMobile = selectItem.customerMobile;
      this.costRate = selectItem.costRate;
      this.deposit = selectItem.deposit;
      this.form.contractId = selectItem.id;
      this.form.customerId = selectItem.customerId;
    },
    productChange(e) {
      const list = this.productOptions.filter((element) => {
        return element.id === e;
      });
      this.form.productId = list[0].id;
      this.form.productName = list[0].name;
    },
    async onSubmit() {
      let _this = this;
      _this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        _this.sendMessage()
      })
    },

    // 发送请求
    async sendMessage() {
      let callBack = addImport;
      let oParams = JSON.parse(JSON.stringify(this.form));
      let arr = [];
      this.fileList.map((k) => {
        arr.push(k.url);
      });
      oParams.certificate = arr.toString();

      if (this.submitType != 1) {
        callBack = updateImport;
      }
      this.submitLoading = true;
      let res = await callBack(oParams);
      this.submitLoading = false;
      if (res.code === 200) {
        this.$message.success(res.message);
        this.$emit("updateEvent");
        this.$emit("change");
      }
    },

    setData(form) {
      this.contractCode = form.contractCode;
      this.customerName = form.customerName;
      this.customerMobile = form.customerMobile;
      this.costRate = form.costRate;
      this.deposit = form.deposit;
      this.form.contractId = form.contractId;
      this.form.id = form.id;
      this.productId = form.productId;
      this.form.productId = form.productId;
      this.form.productName = form.productName;
      this.form.counts = form.counts;
      this.form.progress = form.progress;
      this.form.state = form.state;
      this.form.income = form.income;
      this.form.completion = form.completion;
      this.form.need = form.need;
      this.form.customerId = form.customerId;
    },
    setAddData(form) {
      this.form.contractId = form.id;
      this.form.customerId = form.customerId;
      this.contractCode = form.contractCode;
      this.customerName = form.customerName;
      this.customerMobile = form.customerMobile;
      this.costRate = form.costRate;
      this.deposit = form.deposit;
    },
    close() {
      console.log("78777");
      this.$emit("change");
      this.$emit("close");
    },

    // 监听图片上传成功
    onSuccess(e) {
      console.log(e);
      if (e.code == 200) {
        let list = this.fileList;
        list.push({ name: e.data, url: e.data });
      }
    },

    //
    previewImage() { },

    onRemove() { },
  },
  created() { },
  mounted() {
    productAll().then((res) => {
      this.productOptions = res.data;
    });
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el-select,
.el-input {
  width: 300px;
}

.upload_tips {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
</style>
